<template>
    <el-dialog title="创建员工" :visible.sync="dialogFormVisible" width="35%" :append-to-body="true"
    @close="dialogClose">
      <el-form status-icon label-width="100px">
          <el-form-item label="工号">
              <el-input v-model="empinfo.feid" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="登录用户名">
              <el-input v-model="empinfo.feusername" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="姓名">
              <el-input v-model="empinfo.fename" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="empinfo.fegender">
            <el-radio :label="true">男</el-radio>
            <el-radio :label="false">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="empinfo.fdid" placeholder="请选择">
                <el-option
                  v-for="item in deptList"
                  :key="item.fdid"
                  :label="item.fdname"
                  :value="item.fdid">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="职位">
            <el-select v-model="empinfo.fetitle" placeholder="请选择">
                <el-option
                  v-for="item in fetitleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="电话号">
              <el-input v-model="empinfo.fetel" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱">
              <el-input v-model="empinfo.feemail" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker
            v-model="empinfo.febirthday"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="入职日期">
            <el-date-picker
            v-model="empinfo.feofferstartdate"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="合同到期日期">
            <el-date-picker
            v-model="empinfo.feofferenddate"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备注">
              <el-input v-model="empinfo.fememo" type="textarea" placeholder="请输入内容" maxlength="200"
              show-word-limit  size="medium" autocomplete="off" />
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="submitForm(empinfo)">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
          </el-form-item>
      </el-form>
    </el-dialog>
</template>
<script>
import { createEmp,updateEmp } from '@/api/emp'
import { getDeptList } from '@/api/dept'

export default {
    props: {
        dialogFormVisible: Boolean,
        editEmpInfo: {
            type:Array,
            default: []
        },
        updateOrCreate: Boolean
    },
    data() {
        return {
            empinfo: {},
            authList: {},
            deptList: {},
            fetitleList: [
                {value:"部长",label:"部长"},
                {value:"经理",label:"经理"},
                {value:"组长",label:"组长"},
                {value:"普通员工",label:"普通员工"}]
        }
    },
    created () {
        this.initGetDeptList()  
    },
    updated () {
        this.empinfo = this.editEmpInfo
    },
    methods: {
        initGetDeptList() {
            getDeptList().then(response => {
                this.deptList = response.data.deptList 
            })
        },
        submitForm(empinfo) {
            if (this.updateOrCreate) {
                updateEmp(empinfo).then(response => {
                    this.$message.success('修改员工成功')
                })
                this.dialogClose()
            } else {
                createEmp(empinfo).then(response => {
                    this.$message.success('创建员工成功')     
                })
                this.dialogClose()
            }
        },
        resetForm() {
            this.empinfo = {}
        },
        // 解决父页面按钮只能点击一次问题
        dialogClose() {
            this.$parent.initGetEmpList()
            this.dialogFormVisible = false
            this.$parent.vueReset()
        }
    }
}
</script>
    